<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<c:set var="ctx" value="${pageContext.request.contextPath}" />
		<title>游戏后台管理系统</title>
		<meta name="description" content="User login page" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<link rel="stylesheet" href="${ctx }/static/css/bootstrap.css" />
		<link rel="stylesheet" href="${ctx }/static/css/matrix-login.css" />
		<link rel="stylesheet" href="${ctx }/static/css/camera.css" />
		<!--[if !IE]> -->
		<script type="text/javascript" src="${ctx }/static/assets/js/jquery-2.1.4.min.js"></script>
		<!-- <![endif]-->
		<!--[if IE]>
		<script type="text/javascript" src="${ctx }/static/assets/js/jquery-1.11.3.min.js"></script>
		<![endif]-->
		<script type="text/javascript" src="${ctx }/static/js/jquery.tips.js"></script>
	</head>

	<body>
	<div style="width: 100%; text-align: center; margin: 0 auto; position: absolute;">

		<div id="loginbox">
			<form action="${ctx }/login/doLogin" method="post" name="loginForm" id="loginForm">
				<div class="control-group normal_text">
					<h3>
						﻿乐和游戏后台管理系统
					</h3>
				</div>
				<div class="control-group">
					<div class="controls">
						<div class="main_input_box">
							<span class="add-on bg_lg"> <i><img src="${ctx}/static/images/user.png" height="37"></i>
							</span><input name="userName" id="userName" placeholder="请输入用户名" type="text">
						</div>
					</div>
				</div>
				<div class="control-group">
					<div class="controls">
						<div class="main_input_box">
							<span class="add-on bg_ly"> <i><img src="${ctx}/static/images/suo.png" height="37"></i>
							</span><input name="psw" id="psw" placeholder="请输入密码" type="password">
						</div>
					</div>
				</div>

				<div class="control-group">

					<div class="controls">
						<div class="main_input_box">

							<div style="width:60%;float:left;">
								<span class="add-on bg_lb"> <i class="glyphicon glyphicon-text-width" style="width:22px;height:15px;display:inline-block"><img style="height:15px;" src="${ctx}/static/images/coad.png"></i></span>
								<input name="code" id="code" onkeydown='if(event.keyCode==13){submitLogin.click()}' class="login_code" placeholder="请输入验证码" style="width:60%;margin-left:-5px;" type="text">
							</div>
							<div style="width:40%;float:left;"><i><img id="codeImg" onclick="changeCode()" alt="点击更换" style="margin-top:2px;" title="点击更换" src="${ctx }/login/verifyCode"></i></div>

							<div style="clear:both;"></div>

						</div>
					</div>



				</div>

				<%--<div>
					<div style="float: right; padding-right: 10%;">
						<div style="float: left; margin-top: 3px; margin-right: 2px;">
							<font color="white">记住密码</font>
						</div>
						<div style="float: left;">
							<input name="form-field-checkbox" id="saveid" onclick="savePaw();" style="padding-top: 0px;" type="checkbox">
						</div>
					</div>
					<div style="clear:both;"></div>
				</div>--%>
				<div style="padding-bottom: 15px;margin-top:10px;">
					<span class="pull-right" style="padding-right:3%;"><a href="javascript:void(0);" onclick="$('#loginForm').reset();" class="btn btn-success">取消</a></span>
					<span class="pull-right" style="padding-right:5px;"><a id="submitLogin" href="javascript:void(0);" onclick="$('#loginForm').submit();" class="flip-link btn btn-info" id="to-recover">登录</a></span>
					<div style="clear:both;"></div>
				</div>
			</form>


			<div class="controls">
				<div class="main_input_box">
					<font color="white"><span id="nameerr">Copyright© ﻿乐和游戏后台管理系统&nbsp;版本号：1.0.0</span></font>
				</div>
			</div>
		</div>
	</div>
	<div class="container_wapper">
		<!-- id="templatemo_banner_slide"  -->
		<div class="camera_wrap camera_emboss" id="camera_slide">
			<!-- <div data-src="static/login/images/banner_slide_01.jpg"></div>
			<div data-src="static/login/images/banner_slide_02.jpg"></div> -->
			<img src="${ctx }/static/images/banner_slide_03.jpg" alt="登录页的背景">
		</div>
		<!-- #camera_wrap_3 -->
	</div>


	<script type="text/javascript">
		function changeCode() {
			$("input[name=code]").val("");
			$("#codeImg").attr("src", "${ctx}/login/verifyCode?t=" + new Date().getTime());
		}
		//客户端校验
		function check() {
			if ($("#userName").val() == "") {
				$("#userName").tips({
					side : 1,
					msg : '用户名不得为空',
					bg : '#AE81FF',
					time : 3
				});
				$("#userName").focus();
				return false;
			} else {
				$("#userName").val(jQuery.trim($('#userName').val()));
			}
			if ($("#psw").val() == "") {
				$("#psw").tips({
					side : 1,
					msg : '密码不得为空',
					bg : '#AE81FF',
					time : 3
				});
				$("#psw").focus();
				return false;
			}
			if ($("#code").val() == "") {
				$("#code").tips({
					side : 1,
					msg : '验证码不得为空',
					bg : '#AE81FF',
					time : 3
				});
				$("#code").focus();
				return false;
			}
			$("#loginbox").tips({
				side : 1,
				msg : '正在登录 , 请稍后 ...',
				bg : '#68B500',
				time : 5
			});
			return true;
		}
		jQuery(function($) {
			changeCode();
			loginForm.onsubmit = function(){
				if(check()){
					jQuery.ajax({
						type:"POST",
						url:"${ctx}/login/doLogin",
						data:$(loginForm).serialize(),
						dataType:"json",
						cache:false,
						success:function(data){
							if(data.code == "1"){
								window.location.href="${ctx}/admin";
							}else {
                                changeCode();
                                if(data.code == "001"){
                                    $("#code").tips({
                                        side : 1,
                                        msg : "验证码不正确",
                                        bg : '#FF5080',
                                        time : 5
                                    });
                                }else if(data.code == "002"){
                                    $("#userName").tips({
                                        side : 1,
                                        msg : "用户名和密码不能为空",
                                        bg : '#FF5080',
                                        time : 5
                                    });
                                }else if(data.code == "003"){
                                    $("#userName").tips({
                                        side : 1,
                                        msg : "用户不存在",
                                        bg : '#FF5080',
                                        time : 5
                                    });
                                }else if(data.code == "004"){
                                    $("#userName").tips({
                                        side : 1,
                                        msg : "用户已禁用",
                                        bg : '#FF5080',
                                        time : 5
                                    });
                                }else if(data.code == "005"){
                                    $("#userName").tips({
                                        side : 1,
                                        msg : "用户名或密码不匹配",
                                        bg : '#FF5080',
                                        time : 5
                                    });
                                }
                            }

						}
					});
				}
                return false;
			}
		});
	</script>
	</body>
</html>
